<!--今天、昨天、7天、30天，时间:[] - [] -->
<!--列表:code,name,url,(avg,max),(avg,max)-->
<!--详请:对code 进行group排序-->
<!--注册接口 -->
<div class="main-view"><!--最外层div-->
    <div class="left-margin top-margin"><strong class="am-text-primary am-text-lg">系统接口</strong></div>

    <form class="am-form-inline left-margin top-margin" role="form">

        <select  ng-model="category">
            <option value="today"  selected>今天</option>
            <option value="tomorrow" >昨天</option>
            <option value="three_before">3天以内</option>
            <option value="week">7天以内</option>
            <option value="rankTime">时段</option>
        </select>
        <button type="submit" class="am-btn am-btn-primary" ng-hide="category == 'rankTime'" ng-click="searchCategory()">搜索
        </button>
        <div ng-hide="category != 'rankTime'">
            <label>开始时间:</label>
            <input type="text" id="startDate" class="datepicker" size="12" style="height: 32px;width: 150px"
                   ng-model="timeStart_">
            <label>至：</label>
            <input type="text" id="endDate" class="datepicker" size="12" style="height: 32px;width: 150px"
                   sdata-date-format="yyyy-mm-dd-ss" ng-model="timeEnd_">
            <button type="submit" class="am-btn am-btn-primary" ng-click="searchCategory()"
                    >搜索
            </button>
        </div>

    </form>
    <br>

    <div class="pagination-table left-margin" id="tab_menu" style="margin-top: 0px;">
        <div id="pagination" class="pagination"></div>
        <form class="am-form">
            <table class="am-table am-table-striped am-table-hover table-main">
                <thead>
                <tr>
                    <!--code,name,url,(avg,max),(avg,max)-->
                    <th class="table-check"><input type="checkbox"></th>
                    <th class="table-id">code</th>
                    <th class="table-id">name</th>
                    <th class="table-title">url</th>
                    <th class="table-title">avg_node_time</th>
                    <th class="table-title">max_node_time</th>
                    <th class="table-title">avg_time</th>
                    <th class="table-title">max_time</th>

                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="api in apiList" id="{{api.objId}}">
                    <td class="table-check"><input type="checkbox" class="item-check"></td>

                    <td>{{api.service_code}}</td>
                    <td>{{api.service_name}}</td>
                    <td style="width: 400px;word-wrap:break-word;">
                        <div style="position: relative;width: 400px; height: 60px; overflow:auto;line-height: 1.2;">
                            {{api.url}}
                        </div>
                    </td>
                    <td>{{api.avg_node_time|number:0:3}}</td>
                    <td>{{api.max_node_time|number:0:3}}</td>
                    <td>{{api.avg_time|number:0:3}}</td>
                    <td>{{api.max_time|number:0:3}}</td>
                    <td>
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">

                                <button data-am-modal="{target: '#doc-modal-Detail', width: 1000, height: 520}"
                                        ng-click="apiCodeCategoryDetail(api)"
                                        class="am-btn am-btn-default am-btn-xs am-text-secondary">
                                    <span class="am-icon-copy"></span>详细信息
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>

    <!--加载中-->
    <div class="am-modal am-modal-loading am-modal-no-btn" id="loading">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">正在载入...</div>
            <div class="am-modal-bd">
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
        </div>
    </div>

    <!--查看-->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-Detail">
        <div class="am-modal-dialog">
            <div class="am-modal-bd body-area">
                <div class="text-left" style="width:90%">
                    <div id="pagination_detail" class="pagination">

                    </div>
                        <form class="am-form">
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                <tr>
                                    <!--code,name,url,(avg,max),(avg,max)-->
                                    <th class="table-id">code</th>
                                    <th class="table-title">service_name</th>
                                    <th class="table-title">node_time</th>
                                    <th class="table-title">time</th>
                                    <th class="table-title">net_type</th>
                                    <th class="table-title">net_provider</th>
                                    <th class="table-title">syetem_type</th>
                                    <th class="table-title">version_name</th>
                                    <th class="table-title">create_time</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="apiCode in apiCodeList">
                                    <td>{{apiCode.service_code}}</td>
                                    <td>{{apiCode.service_name}}</td>
                                    <td>{{apiCode.node_time |number:0:3}}</td>
                                    <td>{{apiCode.time |number:0:3}}</td>
                                    <td>{{apiCode.net_type}}</td>
                                    <td>{{apiCode.net_provider}}</td>
                                    <td>{{apiCode.type}}</td>
                                    <td>{{apiCode.vname}}</td>
                                    <td>{{apiCode.create_time | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </form>
                </div>
            </div>

        </div>
    </div>
</div>


<script>
    var fromDate_edit = $('#startDate').datetimepicker().on('changeDate', function (ev) {
        $('#startDate').datetimepicker({
            format: 'yyyy-mm-dd hh:ii'
        });
        console.log("startDate clicked" + fromDate_edit);
    });

    var toDate_edit = $('#endDate').datetimepicker().on('changeDate', function (ev) {
        $('#endDate').datetimepicker({
            format: 'yyyy-mm-dd hh:ii'
        });
        console.log("startDate clicked");
        console.log("startDate clicked" + fromDate_edit);
    });
</script>